<template>
  <view class="flex flex-col h-screen bg-gray-100">
    <!-- 顶部固定区域 -->
    <view class="fixed top-0 left-0 right-0 z-50 bg-white">
      <!-- 导航栏 -->
      <view class="flex items-center px-4 py-2 nav-height bg-white"> </view>

      <!-- 搜索框 -->
      <view class="bg-white border-b border-gray-100 text-sm">
        <uni-search-bar
          v-model="searchText"
          placeholder="搜索学校"
          cancelButton="none"
          @input="debounceSearch"
          @clear="clearSearch"
          class="px-4 py-2"
        />
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-pt pb-20">
      <!-- 学校列表 -->
      <scroll-view scroll-y class="h-full">
        <view
          v-for="(school, index) in universityStore.university"
          :key="index"
          class="flex items-center justify-between py-4 px-4 border-b border-gray-200 bg-white text-sm"
          @tap="selectSchool(school)"
        >
          <text class="text-sm">{{ school.name }}</text>
          <text v-if="selectedSchool?.name === school.name" class="iconfont text-blue-500">✓</text>
        </view>
      </scroll-view>
    </view>

    <!-- 底部确定按钮 -->
    <view class="fixed bottom-0 left-0 right-0 px-4 py-3 bg-white border-t border-gray-100">
      <button
        class="w-full py-3 rounded-full bg-blue-500 text-white disabled:opacity-50 text-sm"
        :disabled="!selectedSchool"
        @tap="handleConfirm"
      >
        确定
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUniversityStore } from '@/stores/modules/university'
import { useMemberStore } from '@/stores/modules/member'
const universityStore = useUniversityStore()
const memberStore = useMemberStore()

const searchText = ref('')
const selectedSchool = ref<{ name: string } | null>(null)
let searchTimer: ReturnType<typeof setTimeout> | null = null

// 防抖搜索函数
const debounceSearch = (value: string | number) => {
  if (searchTimer) {
    clearTimeout(searchTimer)
  }
  searchTimer = setTimeout(() => {
    handleSearch(String(value))
  }, 300) // 300ms 后执行搜索
}

// 处理搜索
const handleSearch = async (value: string) => {
  await universityStore.getUniversityByName(value)
}

// 清除搜索
const clearSearch = () => {
  searchText.value = ''
  universityStore.clearUniversity()
  selectedSchool.value = null
  if (searchTimer) {
    clearTimeout(searchTimer)
  }
}

// 选择学校
const selectSchool = (school: { name: string }) => {
  selectedSchool.value = school
}

// 确认选择
const handleConfirm = () => {
  if (!selectedSchool.value) return
  memberStore.updateProfile({
    school: selectedSchool.value!.name,
  })
  universityStore.clearUniversity()
  searchText.value = ''
  selectedSchool.value = null
  uni.navigateBack()
}
</script>

<style>
/* 平台特定的样式，无法用 Tailwind 替代的部分 */
.nav-height {
  /* #ifdef H5 */
  padding-top: 20px;
  height: calc(44px + 20px);
  /* #endif */

  /* #ifdef MP-WEIXIN */
  padding-top: var(--status-bar-height);
  height: calc(44px + var(--status-bar-height));
  /* #endif */
}

.content-pt {
  /* #ifdef H5 */
  padding-top: calc(44px + 20px + 6px);
  /* #endif */

  /* #ifdef MP-WEIXIN */
  padding-top: calc(44px + var(--status-bar-height) + 6px);
  /* #endif */
}
</style>
